html,body{
    width: 100%;
    height: 100%;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box{
    margin: auto;
    position: relative;
    min-width: 1654px;
    max-width: 2560px;
    width: 100%;
    height: 240px;
    overflow: hidden;
    transition: all 1s;
    .back{
        display: none;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 2560px;
        img{
            width: 100%;
        }
    }

    .canvas_box{
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 2560px;
        height: 480px;

        .canvas{
            width: 100%;
            height: 100%;
            background: transparent;
        }

        ._33{
            display: none;
            position: absolute;
            top: 0;
            left: 760px;
            width: 640px;
            height: 480px;
            cursor: pointer;
        }

        .phone{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            .mask{
                width: 100%;
                height: 100%;
                cursor: pointer;
            }

            .img{
                // display: none;
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                height: 100%;
                width: auto;
                transition: all 1s;
                img{
                    height: 100%;
                }

                .icon_play{
                    position: absolute;
                    left: 240px;
                    top: 160px;
                    width: 50px;
                    height: 50px;
                    cursor: pointer;
                    i{
                        font-size: 50px;
                        color: #fff;
                    }
                }

                .progress_bar{
                    position: absolute;
                    left: 160px;
                    bottom: 60px;
                    width: 200px;
                    height: 40px;
                    // background-color: skyblue;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    
                    .line{
                        flex: none;
                        width: 100%;
                        height: 10px;
                        border-radius: 50px;
                        background-color: skyblue;
                    }

                    .circle{
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translateX(-50%) translateY(-50%);
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        background-color: skyblue;
                        border: 6px solid #fff;
                        pointer-events: none;
                    }
                }
            }
            
        }

    }
}


.btns{
    margin-top: 20px;
    margin: auto;
    width: 1000px;

    button{
        margin: 10px;
        padding: 10px;
        width: 200px;

        border: none;
        background-color: skyblue;
        cursor: pointer;
    }
}